<template>
    <div>
        <!-- 头部图片 -->
        <div class="child-header f-cen">
            <img src="../assets/images/careers/top-lavoraconnoi2.jpg" />
            <div class="mask"></div>
            <div class="box">
                <div class="header-title animate__animated animate__bounceInDown">
                    <div class="title1">Proponi la tua candidatura</div>
                    <div class="title2">Join our team</div>
                </div>
            </div>
        </div>
        <!-- 主体宫格图片 -->
        <div class="main">
            <!-- 大标题 -->
            <div class="main-title c">Join our team</div>
            <div
                class="main-text j"
            >L’azienda al momento ricerca le seguenti posizioni. Ai sensi delle leggi 903/77 e 125/91 gli annunci di lavoro sono rivolti a entrambi i sessi e a persone di tutte le età e tutte le nazionalità, in ottemperanza ai decreti legislativi 215/03 e 216/03. I candidati sono invitati a leggere l’informativa sulla privacy e a candidarsi per mezzo dell’apposito form o inviando il proprio curriculum vitae dettagliato all’indirizzo cv@biot.it, indicando in oggetto la posizione per cui ci si candida e fornendo l’autorizzazione al trattamento dei dati personali in ottemperanza al GDPR/2018.</div>
            <div class="main-box f-cen">
                <div class="main-box-content f-col">
                    <div class="f">
                        <div class="row f" v-for="(item, index) in list" :key="index">
                            <div
                                class="item f-end fir"
                                :style="{ background: 'url( ' + item.imgUrl + ')  no-repeat center' }"
                            >
                                <div class="item-left f-col">
                                    <div class="item-left-title">{{ item.title }}</div>
                                    <div class="item-left-text" v-html="item.text"></div>
                                    <a href="#/tecnoogie">
                                        <div class="btn c">LEGGI TUTTO</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="f">
                        <div class="row f" v-for="(item1, index) in list1" :key="index">
                            <div
                                class="item f-end"
                                :style="{ background: 'url( ' + item1.imgUrl + ')  no-repeat center' }"
                            >
                                <div class="item-left f-col">
                                    <div class="item-left-title">{{ item1.title }}</div>
                                    <div class="item-left-text">{{ item1.text }}</div>
                                    <a href="#/tecnoogie">
                                        <div class="btn c">LEGGI TUTTO</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="f">
                        <div class="row f" v-for="(item2, index2) in list2" :key="index2">
                            <div
                                class="item f"
                                :style="{ background: 'url( ' + item2.imgUrl + ')  no-repeat center ' }"
                            >
                                <div class="item-left f-col">
                                    <div class="item-left-title">{{ item2.title }}</div>
                                    <div class="item-left-text">{{ item2.text }}</div>
                                    <a href="#/tecnoogie">
                                        <div class="btn c">LEGGI TUTTO</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="f">
                        <div class="row f" v-for="(item3, index) in list3" :key="index">
                            <div
                                class="item f-end"
                                :style="{ background: 'url( ' + item3.imgUrl + ')  no-repeat center' }"
                            >
                                <div class="item-left f-col">
                                    <div class="item-left-title">{{ item3.title }}</div>
                                    <div class="item-left-text">{{ item3.text }}</div>
                                    <a href="#/tecnoogie">
                                        <div class="btn c">LEGGI TUTTO</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 表单 -->
        <div class="form">
            <div class="form-title c">Proponi la tua candidatura</div>
            <div class="form-text c">
                <p>
                    E’ possibile inviare il proprio curriculum vitae dettagliato all’indirizzo
                    <a
                        href="#"
                        class="link"
                    >cv@biot.it</a>
                </p>
                <p>o compilando l’apposito form a seguire.</p>
            </div>
            <el-form :model="form" label-width="120px" label-position="top">
                <el-form-item label="Posizione*">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="Nome e Cognome*">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="Dati personali">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="Studi e formazione">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="Esperienze lavorative">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="Altre informazioni">
                    <el-input v-model="form.desc" type="textarea" :autosize="{ minRows: 4 }" />
                </el-form-item>
                <el-form-item label="Esperienza lavorativa">
                    <el-input v-model="form.desc" type="textarea" :autosize="{ minRows: 8 }" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">Salva e invia</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { reactive } from 'vue'
let list = [{
    title: 'Manager commerciale nel settore biomedicale',
    text: 'La risorsa con almeno 5/7 anni di esperienza nel settore, si dovrà occupare di informazione scientifica a medici specialisti, terapeuti, cliniche, ospedali, centri polispecialistici per promuovere il portafoglio dei prodotti e la vendita con lo scopo di raggiungere gli obiettivi aziendali.<br/> Il candidato ideale ha un’età compresa tra i 35 ed i 45 anni, laurea in discipline scientifichequali a scopo esemplificativo e non esaustivo: Ingegneria Biomedica, Ingegneria Clinica, Biotecnologie Mediche e Farmaceutiche, Scienze Biotecnologiche, Medicina & Chirurgia, Scienze Biologiche, Biologia, Chimica con indirizzo organico e biologico, pregressa esperienza commerciale possibilmente nel settore dei dispositivi elettromedicali (target medico specialistico).',
    imgUrl: 'src/assets/images/careers/list1.jpg'

}]

let list1 = [{
    title: 'Healthcare: comunicazione scientifica e social media marketing',
    text: 'La figura ricercata (laureata in materie scientifiche, con perfetta padronanza della lingua italiana scritta e orale) lavorerà a stretto contatto con la Direzione dell’azienda nel settore dell’Healthcare.',
    imgUrl: 'src/assets/images/careers/list2.jpg'

}, {
    title: 'Impiegato/a amministrativo contabile',
    text: 'La risorsa impiegata nell’area contabile amministrativa, si occuperà di: Garantire, in coordinamento con il commercialista, l’osservazione puntuale di tutte le scadenze amministrative nel rispetto dei termini di pagamento (quali ad esempio: buste paga, del F24 relativi a INPS, IVA, INAIL, rateazioni etc.). ',
    imgUrl: 'src/assets/images/careers/list3.jpg'

}]
let list2 = [{
    title: 'Tirocinio remunerato per ingegnere biomedico',
    text: 'La risorsa si occuperà del portafoglio clienti, dell’acquisizione, della gestione e catalogazione dei risultati terapeutici attraverso il contatto diretto con i pazienti ed i medici, della ricerca e della sperimentazione dei macchinari commercializzati,',
    imgUrl: 'src/assets/images/careers/list4.jpg'

}, {
    title: 'Tesi di laurea',
    text: 'L’azienda, all’avanguardia nel settore della ricerca e dell’innovazione tecnologica, nell’ambito dell’attivazione di convenzioni con i principali Atenei di Roma (Università “La Sapienza”, Università “Roma Tre”, Università “Campus Bio-Medico”) mette a disposizione una serie di tesi di laurea in materie pertinenti il settore biomedico',
    imgUrl: 'src/assets/images/careers/list5.jpg'

}]
let list3 = [{
    title: 'Informatori scientifici e rappresentati',
    text: 'L’azienda ricerca nuovi rappresentanti sul territorio nazionale e internazionale per i propri prodotti è pertanto aperta a valutare partner già affermati nel settore della strumentazione biomedica che desiderino integrare nel loro portafoglio prodotti le tecnologie di nuova generazione',
    imgUrl: 'src/assets/images/careers/list6.jpg'

}, {
    title: 'Collaborazione e ricerca',
    text: 'L’azienda collabora con medici specializzati e centri di ricerca per lo sviluppo di nuove tecnologie e nuove terapie. Siamo disponinibili a valutare sinergiche forme di collaborazione per coloro che sono interessati a sviluppare progetti nel nostro settore, fare ricerca clinica, sviluppare nuovi protocolli di trattamento,',
    imgUrl: 'src/assets/images/careers/list7.jpg'

}]



// do not use same name with ref
const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})

const onSubmit = () => {
    console.log('submit!')
}
</script>

<style lang="less" scoped>
.main {
    &-title {
        color: @text-title;
        font-size: 48px;
        font-weight: 600;
        margin-top: 60px;
    }
    &-text {
        font-size: 14px;
        max-width: @box-width;
        width: 100%;
        padding: 0 25px;
        color: @text-main;
        margin: 30px auto 50px auto;
    }
    &-box {
        &-content {
            max-width: @box-width+100px;
            width: 100%;
            padding: 0 25px;
            .row {
                width: 100%;

                .item {
                    margin: 12px 15px;
                    width: 100%;
                    height: 350px;
                    background-size: cover !important;
                    &-left {
                        justify-content: center;
                        width: 50%;
                        background-color: rgba(255, 255, 255, 0.8);
                        padding: 20px;
                        &-title {
                            color: @text-title;
                            font-size: 20px;
                            font-weight: 600;
                        }
                        &-text {
                            font-size: 12px;
                            color: @text-main;
                            text-align: justify;
                        }
                    }
                    .btn {
                        color: @text;
                        background-color: @bg2;
                        font-size: 12px;
                        border-radius: 3px;
                        margin-top: 20px;
                        float: left;
                        cursor: pointer;
                        padding: 8px 12px;
                    }
                }
                .fir {
                    height: 400px;
                    background-size: 50% !important;
                    background-position: 0 0 !important;

                    .item-left {
                        background-color: @bg5;
                    }
                }
            }
        }
    }
}
.form {
    padding: 50px;
    background: url("../assets/images/careers/bg.jpg") no-repeat;
    background-size: cover;
    &-title {
        font-size: 34px;
        color: @text-title;
        font-weight: 600;
        margin-top: 50px;
    }
    &-text {
        font-size: 14px;
        color: @text-main;
        margin-bottom: 50px;
    }
    .el-form {
        max-width: 800px;
        margin: auto;
        .el-button {
            background-color: @bg2;
            border: none;
            border-radius: 0;
        }
        &:deep(.el-input__inner:focus) {
            box-shadow: 0 0 0 1px @bg2 !important;
        }
        &:deep(.el-textarea__inner:focus) {
            box-shadow: 0 0 0 1px @bg2 !important;
        }
    }
}
</style>